<template>
  <div>
    <el-table
      ref="multipleTable"
      class="table mb20"
      :show-summary="showSummary"
      :summary-method="getSummary"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      height="250"
    >
      <template v-if="activeName === 'first'">
        <el-table-column label="编码" align="center" prop="questionCode" />
        <el-table-column label="题目类型" align="center" prop="questionType">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.topic_type" :value="scope.row.questionType" />
          </template>
        </el-table-column>
        <el-table-column label="难度系数" align="center" prop="questionDifficult">
          <template slot-scope="scope">
            {{ scope.row.questionDifficult | floatFormat }}
          </template>
        </el-table-column>
        <el-table-column label="难度" align="center" prop="questionEasy">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.difficulty" :value="scope.row.questionEasy" />
          </template>
        </el-table-column>
        <el-table-column label="重要度" align="center" prop="questionGrade">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.grade" :value="scope.row.questionGrade" />
          </template>
        </el-table-column>
        <el-table-column label="题目内容" align="center" prop="questionContent" min-width="100">
          <template slot-scope="scope">
            <el-button slot="reference" size="small" @click="showHtml(scope.row.questionContent)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column label="答案" align="center" prop="answer" min-width="100">
          <template slot-scope="scope">
            <el-button slot="reference" size="small" @click="showHtml(scope.row.answer)">查看</el-button>
          </template>
        </el-table-column>
        <!--      <el-table-column label="创建人" align="center" prop="createdBy" />-->
        <el-table-column label="创建时间" align="center" prop="createdTime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createdTime, "{y}-{m}-{d}") }}</span>
          </template>
        </el-table-column>
      </template>

      <template v-if="activeName === 'second'">
        <el-table-column prop="label" label="题目类型" />
        <el-table-column prop="score" label="分值" />
        <el-table-column prop="scoreRate" label="分值占比">
          <template slot-scope="scope">
            <span v-if="scope.row.scoreRate">{{ (scope.row.scoreRate*100).toFixed(2) + "%" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="questionNum" label="题目数量" />
        <el-table-column prop="countRate" label="百分比">
          <template slot-scope="scope">
            <span>{{ (scope.row.rate*100).toFixed(2) + "%" }}</span>
           </template>
        </el-table-column>
      </template>

      <template v-if="activeName === 'third'">
        <el-table-column prop="label" label="能力层次" />
        <el-table-column prop="score" label="分值" />
        <el-table-column prop="questionNum" label="题目数量" />
        <el-table-column prop="countRate" label="百分比">
          <template slot-scope="scope">
            <span>{{ (scope.row.rate*100).toFixed(2) + "%" }}</span>
           </template>
        </el-table-column>
      </template>

      <template v-if="activeName === 'fourth'">
        <el-table-column prop="label" label="难度" />
        <el-table-column prop="score" label="分值" />
        <el-table-column prop="questionNum" label="题目数量" />
        <el-table-column prop="countRate" label="百分比">
          <template slot-scope="scope">
            <span>{{ (scope.row.rate*100).toFixed(2) + "%" }}</span>
           </template>
        </el-table-column>
      </template>

      <template v-if="activeName === 'five'">
        <el-table-column prop="label" label="章节名称" />
        <el-table-column prop="score" label="分值" />
        <el-table-column prop="questionNum" label="题目数量" />
        <el-table-column prop="countRate" label="百分比">
          <template slot-scope="scope">
            <span>{{ (scope.row.rate*100).toFixed(2) + "%" }}</span>
           </template>
        </el-table-column>
      </template>

      <template v-if="activeName === 'six'">
        <el-table-column prop="label" label="知识点名称" />
        <el-table-column prop="score" label="分值" />
        <el-table-column prop="questionNum" label="题目数量" />
        <el-table-column prop="countRate" label="百分比">
          <template slot-scope="scope">
            <span>{{ (scope.row.rate*100).toFixed(2) + "%" }}</span>
          </template>
        </el-table-column>
      </template>

      <template v-if="activeName === 'seven'">
        <el-table-column prop="label" label="重要度" />
        <el-table-column prop="score" label="分值" />
        <el-table-column prop="questionNum" label="题目数量" />
        <el-table-column prop="countRate" label="百分比">
          <template slot-scope="scope">
            <span>{{ (scope.row.rate*100).toFixed(2) + "%" }}</span>
          </template>
        </el-table-column>
      </template>

    </el-table>
  </div>
</template>

<script>
export default {
  components: {},
  dicts: ["topic_type", "difficulty", "grade", "capability_level"],
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    activeName: {
      type: String,
      default: () => "first",
    },
  },
  data() {
    return {
      showSummary:true
    };
  },
  updated() {
    this.$nextTick(()=>{
      this.$refs.multipleTable.doLayout();
    })
  },
  methods: {
    showHtml(html) {
      this.$alert(html, "题目信息", {
        dangerouslyUseHTMLString: true,
        customClass: "question-html",
      });
    },
    getSummary(param){
      const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
          } else {
            if(column.property === 'countRate'){
              sums[index] = '100.00%';
            }
          }
        });
        return sums;
    }
  },
};
</script>
